<!-- 基础：3、模板语法 Filters -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：3、模板语法 Filters</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<!-- vue过滤器的语法：
			在mustache语法绑定中形式为{{ message | [capitalize/uppercase/lowercase/currency/pluralize/debounce/limitBy/filterBy/orderBy] }}
			在v-bind中去掉外层两个花括号
			里面 "|" 符号左边为过滤前的来自实例的数据，右边为过滤的方法，有大写、小写、首字母大写等
		 -->
		<p>{{message | capitalize}}</p>
		<p v-bind:title="message | capitalize">test</p>
		<!-- 过滤器支持串联，即经过多层过滤，前一层过滤结果做后一层过滤的输入值 -->
		<p>{{ message | capitalize | uppercase }}</p>
		<!-- 过滤方法默认将过滤字符串认定为是第一个参数，也可以传其他参数 -->
		<p>{{ message | test('arg1', num) }}</p>
	</div>

	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				message: 'abc',
				num: 5							
			},
			// 在vue1.0中，过滤器语法方法参数都是自带的
			// 在vue2.0中，作者取消了这一特性，过滤器用到的方法需要在实例选项对象的filters属性中自定义
			filters: {
				capitalize: function (value) {
					if (!value) return ''
					value = value.toString()
					return value.charAt(0).toUpperCase() + value.slice(1)
				},
				uppercase: function (value) {
					if(!value) return ''
						value = value.toString()
					return value.toUpperCase()
				},
				test: function (value, param1, param2) {
					if(!value) return ''
					return value + ' ' + param1 + ' ' + param2
				}
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->